<template>
  <view class="wrap">
    <z-paging ref="paging" v-model="list" @query="getList" @onRefresh="onRefresh">
      <template #top>
        <uv-navbar :fixed="false" :title="title" autoBack safeAreaInsetTop placeholder :border='false'>
          <template v-slot:right>
            <view class="navEditName" @click="reast">重置筛选</view>
          </template>
        </uv-navbar>
        <view class="tabs">
          <uv-tabs :list="tabList" :current='current' :scrollable='false' lineColor='#E43222' lineWidth='36rpx' lineHeight='6rpx' itemStyle='height: 90rpx' activeStyle='font-weight: 500; font-size: 28rpx; color: #2B2B2B;' inactiveStyle='font-weight: 500; font-size: 28rpx; color: #999999;' @click="tabClick"></uv-tabs>
        </view>
        <view class="search" v-if="!isMy">
          <view class="pick">
            <view class="item" @click="openComp">
              <text class='font'>{{ company ? company : '上市公司' }}</text>
              <uv-icon name='arrow-down-fill' size='20rpx' color="#999999"></uv-icon>
            </view>
            <view class="item" @click="openDate">
              <text class='font'>{{ date ? date : '指定日期' }}</text>
              <uv-icon name='arrow-down-fill' size='20rpx' color="#999999"></uv-icon>
            </view>
            <view class="item" @click="openPick">
              <text class='font'>{{ city ? city : '城市' }}</text>
              <uv-icon name='arrow-down-fill' size='20rpx' color="#999999"></uv-icon>
            </view>
          </view>
          <uv-icon name="search" size='56rpx' color='#000000' @click="search"></uv-icon>
        </view>
        <uv-gap height="20rpx" bgColor="#F5F5F5"></uv-gap>
      </template>
      <template #empty>
        <uv-empty show mode="list" marginTop='200rpx'></uv-empty>
      </template>
      <view class="base">
        <view class="list">
          <view class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
            <view class="content">
              <view class="icon">
                <image src="../../static/invest1.png" class="img" v-if="current == 0"></image>
                <image src="../../static/invest2.png" class="img" v-if="current == 1"></image>
              </view>
              <view class="right">
                <view class="title">{{ item.target_name }}</view>
                <view class="desc">时间：{{ timeFormat(item.start_time, 'yyyy年mm月dd日 hh:MM') }}</view>
                <view class="desc" v-if="current != 0">城市：{{ item.city }}</view>
              </view>
            </view>
            <uv-icon name='arrow-right' size='32rpx' color="#B8B8B8"></uv-icon>
          </view>
        </view>
      </view>
    </z-paging>
    
    
    
    
    <uv-popup ref="popup" mode='center' round='24rpx' @change="popupChange">
      <view style="width: 90vw;padding: 30rpx;">
        <view style="text-align: center;font-size: 34rpx;padding-bottom: 30rpx;">公司名称</view>
        <uv-input v-model="compValue" placeholder="请输入" border="surround" autoBlur fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
        <view style="margin-top: 30rpx;">
          <button class="btn" @click="confirm">确认</button>
        </view>
      </view>
    </uv-popup>
    
    <uv-datetime-picker ref="datetimePicker" v-model="dateValue" :formatter="formatter" mode="datetime" confirmColor='#E43222' @confirm="dateConfirm"></uv-datetime-picker>
    
    <uv-picker ref="picker" :columns="columns" confirmColor='#E43222' @confirm="cityConfirm" @change="change"></uv-picker>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { post } from '@/api';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import cityJson from '@/common/city.js';

const popup = ref(null);
const datetimePicker = ref(null);
const picker = ref(null);
const paging = ref(null);
const tabList = [
  { name: '上市公司调研' },
  { name: '策略会&线下活动' }
];
let isMy = ref(0);
let title = ref('');
let columns = ref([]);
let cityList = [];
let current = ref(0);
let compValue = ref('');
let dateValue = ref('');

let company = ref('');
let date = ref('');
let city = ref('');
let list = ref([]);

onLoad((option) => {
  // 配置城市数据
  let province = [];
  for(let item in cityJson){
    province.push(item);
    cityList.push(cityJson[item]);
  }
  columns.value = [province, cityList[0]];
  // end
  if(option.index){
    current.value = Number(option.index) - 1;
  }
  isMy.value = Number(option.isMy);
  title.value = isMy.value == 1 ? "我发布的调研" : '';
})
// 下拉刷新
function onRefresh(){
  setTimeout(() => {
    // search()
    paging.value.endRefresh();
  }, 1000)
}

function getList(page, limit){
  const params = {
    is_my: isMy.value,
    type: current.value + 1,
    limit,
    page
  }
  if(company.value) params.target_name = company.value;
  if(city.value) params.city = city.value;
  if(date.value) params.time = date.value;
  
  post('api/survey/surveyList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      paging.value.complete(data.data);
    }
  })
}
function reast(){
  company.value = '';
  date.value = '';
  city.value = '';
  search();
}
function search(){
  paging.value.reload();
}
function tabClick(row){
  current.value = row.index;
  search();
}
function popupChange(e){
  if(!e.show) compValue.value = '';
}
function openComp(){
  popup.value.open();
}
function confirm(){
  company.value = compValue.value;
  popup.value.close();
}
function openDate(){
  datetimePicker.value.open();
}
function dateConfirm(e){
  let val = e.value;
  date.value = timeFormat(val, 'yyyy-mm-dd');
}
function formatter(type, value) {
  if (type === 'year') {
    return `${value}年`
  }
  if (type === 'month') {
    return `${value}月`
  }
  if (type === 'day') {
    return `${value}日`
  }
  if(type === 'hour'){
    return `${value}时`
  }
  if(type === 'minute'){
    return `${value}分`
  }
  return value
}
function openPick(){
  picker.value.open();
}
function change(e) {
  const { columnIndex , index} = e;
  if (columnIndex === 0) {
    picker.value.setColumnValues(1, cityList[index]);
  }
}
function cityConfirm(e){
  city.value = e.value[1];
  picker.value.close();
}
function goDetail(row){
  uni.navigateTo({
    url: `/pages/invest/detail?id=${row.id}`
  });
}
</script>

<style lang="scss" scoped>
  .navEditName{
    font-weight: 400;
    font-size: 28rpx;
    color: #E43222;
  }
  .base{
    .list{
      width: 100%;
      background-color: #fff;
      padding: 0 30rpx;
      .item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 165rpx;
        border-bottom: 1px solid #E6E6E6;
        &:last-child{
          border-bottom: 0;
        }
        .content{
          flex: 1;
          width: 0;
          display: flex;
          align-items: center;
          .right{
            flex: 1;
            width: 0;
            padding-left: 30rpx;
            .desc{
              font-weight: 400;
              font-size: 24rpx;
              color: #999999;
              padding-top: 8rpx;
            }
            .title{
              font-weight: 500;
              font-size: 32rpx;
              color: #2B2B2B;
            }
          }
          .icon{
            width: 80rpx;
            height: 80rpx;
            font-size: 0;
          }
        }
      }
    }
  }
  .search{
    width: 100%;
    height: 80rpx;
    background-color: #fff;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    .pick{
      flex: 1;
      width: 0;
      padding-right: 20rpx;
      display: flex;
      align-items: center;
      .item{
        flex: 1;
        width: 0;
        padding-right: 10rpx;
        display: flex;
        align-items: center;
        .font{
          font-weight: 400;
          font-size: 26rpx;
          color: #737373;
          padding-right: 4rpx;
          overflow:hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow:ellipsis;
        }
      }
    }
  }
  .tabs{
    background-color: #fff;
    width: 100%;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>